<template>
	<view>
		<!-- 学习数据 -->
		<!-- 头部选项卡 -->
		<view class="navTab">
			<view :class="listIndex==i?'activite':''" @click="gopage(i)" v-for="(item,i) in navList" :key="i">{{item}}
			</view>
		</view>
		<!-- 不同的图表 -->
		<view id="mycan">
			<canvas style="height: 500rpx;font-size: 1rpx;" canvas-id="DataCanvas" class='canvasII'></canvas>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				canvasList: [
					{date:"9-12",num:0},
					{date:"9-13",num:2},
					{date:"9-14",num:50},
					{date:"9-15",num:45},
					{date:"9-16",num:15},
					{date:"9-17",num:54},
					{date:"9-18",num:0}
				],
				timescale:[10,20,30,40,50,60],
				
				width:300,
				height:200,
				canPersent: [] ,//百分比数组
				timePersent: [],//y轴高度百分比
				listIndex:0,
				navList:["最近七天","最近七个月"],
			}
		},
		onShow() {
			this.showChart();
		},
		methods: {
			gopage(i) {

			},
			showChart() {
				const system = uni.getSystemInfoSync();
				var w = system.windowWidth / 750
				console.log(w,"width");
				const ctx = uni.createCanvasContext("DataCanvas")
				ctx.lineWidth = 1;
				// 横坐标
				ctx.beginPath(); //新建一条path
				ctx.setStrokeStyle('#c6c6c6')
				ctx.moveTo(20*w, this.height*w); //把画笔移动到指定的坐标(起点坐标)
				ctx.lineTo(this.width*w, this.height*w); //绘制一条从当前位置到指定坐标(200, 50)的直线.(终点坐标)
				ctx.closePath(); //闭合路径。会拉一条从当前点到path起始点的直线。如果当前点与起始点重合，则什么都不做
				ctx.stroke(); //绘制路径。
				// 纵坐标
				ctx.beginPath();
				ctx.moveTo(20*w, 0);
				ctx.lineTo(20*w, this.height*w);
				ctx.closePath();
				ctx.stroke();

				var max = 0 //最大值
				var Ymax = 0; //y轴最大值
				// 找到最大的数
				for (var i = 0; i < this.canvasList.length; i++) {
					if (this.canvasList[i].num >= max) {
						max = this.canvasList[i].num
					}
					if (this.timescale[i]>= Ymax) {
						Ymax = this.timescale[i]
					}
				}
				//y>x轴  y轴数据做百分比参考				
				if(Ymax > max) max = Ymax;
				// max = max*w;
				// 计算百分比: 以数组中最大的为100%，来计算其他的百分比
				for (var i = 0; i < this.canvasList.length; i++) {
					this.canPersent[i] = (this.canvasList[i].num / max) * (this.height - 40) // -10 ,防止太高溢出头
					this.timePersent[i] = (this.timescale[i] /max) * (this.height - 40)
				}

				// 柱状图之间的间隔
				// 绘制7个粗线条 (300-20)/7 = 40，所以 i 每次要加上40  20为左右间隔
				var gap = (this.width - 10 * 2) / this.canPersent.length
				console.log("--gap----->", gap);
				
				
				for(var i = 0;i<this.timescale.length;i++){
					ctx.fillText(this.timescale[i], 0 ,this.height - this.timePersent[i] - 10);
					
					ctx.beginPath();
					ctx.setStrokeStyle('#cbcbcb') //设置柱状图颜色
					ctx.moveTo(21,this.height - this.timePersent[i] - 10);
					ctx.lineTo(26, this.height - this.timePersent[i] - 10);
					ctx.stroke();
					ctx.beginPath();
					ctx.setStrokeStyle('#f7f7f7') //设置柱状图颜色
					ctx.moveTo(26,this.height - this.timePersent[i] - 10);
					ctx.lineTo(300, this.height - this.timePersent[i] - 10);
					ctx.lineWidth = 1;
					ctx.lineCap = "square"; //设置线条样式
					ctx.stroke();
				}
				console.log(this.canPersent[6],"this.canvasList[i]");
				for (var i = 0; i < this.canPersent.length; i++) {
					// 横坐标的数据
					ctx.fillText(this.canvasList[i].date, 30 + gap * i, 220);
					// 柱状图上的数据
					ctx.fillText(this.canvasList[i].num, 33 + gap * i, this.height - this.canPersent[i] - 15);
					// if (this.canPersent[i] == 0 && i != this.canPersent.length - 1) {
					// 	i++
					// 	ctx.fillText(this.canvasList[i].date, 30 + gap * i, 220);
					// 	ctx.fillText(this.canvasList[i].num, 33 + gap * i, this.height - this.canPersent[i] - 15);
					// }
					ctx.beginPath();
					ctx.setStrokeStyle('#fac858') //设置柱状图颜色
					if(this.canvasList[i].num != 0){
						ctx.moveTo(40 + gap * i, this.height - this.canPersent[i] - 6);
						ctx.lineTo(40 + gap * i, this.height - 6);
					}
					ctx.lineWidth = 10;
					ctx.lineCap = "round"; //设置线条样式
					ctx.stroke();
				}
				ctx.draw()
			},
		}
	}
</script>


<style>
	#mycan {
		margin: 20rpx auto;
		width: 620rpx;
		height: 560rpx;
		/* background-color: #fc722d; */
	}

	.navTab {
		display: flex;
		justify-content: space-evenly;
		margin: 3rpx 0;
	}

	.activite {
		color: #fc722d;
		padding: 3rpx 0;
		border-bottom: 3rpx #fc722d solid;
	}
</style>
